<template>
  <div class="test1">
    <p>第一次进来testInfo1为10000</p>
    <p>第一次进来testInfo1为"这是测试一的数据"</p>
    <hr/>
    <p>testInfo1:{{testInfo1}}</p>
    <p>
      <router-link to="/">HelloWorld</router-link>
    </p>
    <div>
      <button @click="push">add</button>
      <ul>
        <template v-for="(item,index) in tplist">
          <li :key="index">{{item}} --{{index}}</li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testInfo1: "100000",
      tplist: [],
    };
  },
  activated() {
    console.log("keepAliveRouter被激活");
  },
  deactivated() {
    console.log("keepAliveRouter被缓存");
  },
  beforeRouteEnter(to, from, next) {
    //beforeRouteEnter是在页面组件实例前的操作
    console.log("来源地址的name", from);
    //判断进入页面的action
    console.log("进入页面的方式", to.meta.action)
    //动态判断是否读缓存
    //只有通过keepAlive进来的页面才读取缓存 
    if (from.name == "keepAlive") {
      to.meta.keepAlive = true;
    } else {
      to.meta.keepAlive = false;
    }
    //to.meta.keepAlive = true; // 让 A 不缓存，即刷新
    next();
  },
  created() {
    if (this.testInfo1 == "这是测试一的数据") {
      return false;
    }
    setTimeout(() => {
      this.testInfo1 = "这是测试一的数据";
    }, 2000);
  },
  methods: {
    push() {
      this.tplist.push("add-")
    }
  }
};

</script>
